<template>
  <div class="appointment-list">
    <el-table
      v-loading="loading"
      :data="appointments"
      style="width: 100%"
    >
      <el-table-column label="预约时间" width="180">
        <template #default="{ row }">
          {{ formatDate(row.createTime) }}
        </template>
      </el-table-column>

      <el-table-column label="咨询者" prop="userName" width="120" />

      <el-table-column label="预约日期" width="120">
        <template #default="{ row }">
          {{ getWeekday(row.weekday) }}
        </template>
      </el-table-column>

      <el-table-column label="时间段" width="180">
        <template #default="{ row }">
          {{ row.begTime }} - {{ row.endTime }}
        </template>
      </el-table-column>

      <el-table-column label="状态" width="120">
        <template #default="{ row }">
          <el-tag :type="getStatusType(row.status)">
            {{ getStatusText(row.status) }}
          </el-tag>
        </template>
      </el-table-column>

      <el-table-column label="操作">
        <template #default="{ row }">
          <el-button-group>
            <template v-if="row.status === 1">
              <el-button 
                type="primary" 
                size="small"
                @click="$emit('handle-action', 'confirm', row.appointmentId)"
              >
                确认
              </el-button>
              <el-button 
                type="danger" 
                size="small"
                @click="$emit('handle-action', 'reject', row.appointmentId)"
              >
                拒绝
              </el-button>
            </template>
            <template v-else-if="row.status === 2">
              <el-button 
                type="success" 
                size="small"
                @click="$emit('handle-action', 'complete', row.appointmentId)"
              >
                完成咨询
              </el-button>
              <el-button 
                type="warning" 
                size="small"
                @click="$emit('handle-action', 'cancel', row.appointmentId)"
              >
                申请取消
              </el-button>
            </template>
          </el-button-group>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script setup lang="ts">
import { defineProps, defineEmits } from 'vue'
import type { Appointment } from '../../../api/appointment'

defineProps<{
  appointments: Appointment[]
  loading: boolean
}>()

defineEmits<{
  (e: 'handle-action', action: string, appointmentId: number): void
}>()

// 格式化日期
const formatDate = (date: string) => {
  return new Date(date).toLocaleString()
}

// 获取星期几
const getWeekday = (weekday: number) => {
  const weekdays = ['周日', '周一', '周二', '周三', '周四', '周五', '周六']
  return weekdays[weekday % 7]
}

// 获取状态文本
const getStatusText = (status: number) => {
  const statusMap = {
    1: '待确认',
    2: '已确认',
    3: '待咨询者确认取消',
    4: '待咨询师确认取消',
    5: '已取消',
    6: '取消被拒绝',
    0: '已完成'
  }
  return statusMap[status] || '未知状态'
}

// 获取状态标签类型
const getStatusType = (status: number) => {
  const typeMap = {
    1: 'warning',
    2: 'success',
    3: 'info',
    4: 'info',
    5: 'danger',
    6: 'warning',
    0: 'success'
  }
  return typeMap[status] || ''
}
</script>

<style scoped>
.appointment-list {
  margin-top: 20px;
}
</style> 